<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { Icon } from '/@/components/Icon';
  import { useMessage } from '/@/hooks/web/useMessage';
  import {
    getAllUnApprovalUsersReq,
    refuseUserApprovalReq,
    passUserApprovalReq,
  } from '/@/api/approval';
  import { sexEnum } from '/@/enums/sexEnum';

  const { createMessage } = useMessage();
  const loading = ref(false);

  // search bar operations
  const searchFormRef = ref();
  const searchForm = reactive({
    userName: '',
    phone: '',
    email: '',
  });
  const searchFormActions = {
    reset(form) {
      console.log(form);
      form.resetFields();
      pgActions.reset();
      tableActions.getList();
    },
  };
  const searchAction = () => {
    pgActions.reset();
    tableActions.getList();
  };

  const pg = reactive({
    current: 1,
    size: 20,
    total: 0,
  });
  const pgActions = {
    reset() {
      pg.current = 1;
      pg.size = 20;
      pg.total = 0;
    },
    currentChange(c) {
      pg.current = c;
      tableActions.getList();
    },
    sizeChange(r) {
      pg.current = 1;
      pg.size = r;
      tableActions.getList();
    },
  };

  const table = reactive({
    data: [{}, {}],
    selected: [],
  });
  const tableActions = {
    async getList() {
      let params = {
        startIndex: pg.current,
        pageSize: pg.size,
        mobile: searchForm.phone,
        username: searchForm.userName,
        email: searchForm.email,
      };
      loading.value = true;
      let { data, respCode } = await getAllUnApprovalUsersReq(params);
      loading.value = false;
      if (respCode === 200) {
        table.data = data.list;
        pg.total = data.total;
      }
    },
    selectionChange(selections) {
      table.selected = selections;
    },
    pass(p) {
      if (p.userId) tableActions.callPassAction([p.userId]);
    },
    batchPass() {
      if (table.selected.length)
        tableActions.callPassAction([...table.selected.map((e: any) => e.userId)]);
    },
    async callPassAction(ids): Promise<void> {
      loading.value = true;
      const { respCode, respMsg } = await passUserApprovalReq({ userIds: ids });
      loading.value = false;
      if (respCode == 200) {
        createMessage({
          message: respMsg,
        });
        searchAction();
      }
    },
    refuse(p): void {
      modalActions.show();
      modal.reason = '';
      modal.id = p.userId;
    },
  };

  const modal = reactive({
    visible: false,
    reason: '',
    id: '',
  });
  const modalActions = {
    show() {
      modal.visible = true;
    },
    close() {
      modal.visible = false;
    },
    async ok() {
      if (!modal.reason) {
        createMessage({
          message: '请输入拒绝原因',
          type: 'warning',
        });
        return;
      }
      loading.value = true;
      const { respCode, respMsg } = await refuseUserApprovalReq({
        userId: modal.id,
        reason: modal.reason,
      });
      loading.value = false;
      if (respCode == 200) {
        createMessage({
          message: respMsg,
        });
        modal.visible = false;
        searchAction();
      }
    },
  };

  tableActions.getList();
</script>

<template>
  <div class="p-4 user-approved">
    <div class="searchBox px-4 pt-4">
      <el-form :model="searchForm" ref="searchFormRef" inline label-width="60px">
        <el-form-item name="userName" label="用户名" prop="userName">
          <el-input v-model="searchForm.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item name="phone" label="手机号" prop="phone">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item name="email" label="邮箱" prop="email">
          <el-input v-model="searchForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-right: 10px"
            :loading="loading"
            type="primary"
            @click="searchAction"
            >查询
          </el-button>
          <el-button @click="searchFormActions.reset(searchFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="middle-content p-4">
      <div class="tools mb-4">
        <div class="toolBtns">
          <el-popconfirm
            title="确定要通过吗？"
            confirm-button-text="确定"
            cancel-button-text="取消"
            @confirm="tableActions.batchPass"
          >
            <template #reference>
              <el-button
                type="primary"
                :loading="loading"
                :disabled="table.selected.length == 0"
                style="padding: 2px 10px; margin-right: 0"
              >
                <Icon icon="iconoir:security-pass" />批量通过
              </el-button>
            </template>
          </el-popconfirm>
        </div>
        <div class="selected">
          已选择<span class="blue">{{ table.selected.length }} 项</span>
        </div>
      </div>
      <el-table
        class="mb-4"
        v-loading="loading"
        :data="table.data"
        row-key="userId"
        @selection-change="tableActions.selectionChange"
      >
        <el-table-column type="selection" width="55" fixed />
        <el-table-column prop="username" label="用户名" :width="150" fixed />
        <el-table-column prop="sex" label="性别" :width="90">
          <template #default="scope">{{ sexEnum[scope.row.sex] }}</template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" :width="220" />
        <el-table-column prop="email" label="邮箱" :width="220" />
        <el-table-column prop="createDate" label="创建时间" :width="220" />
        <el-table-column prop="updateDate" label="更新时间" :width="220" />
        <el-table-column prop="remark" label="备注" :width="220" />
        <el-table-column prop="operation" label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="tableActions.pass(scope.row)">通过</el-button>
            <el-button link type="primary" @click="tableActions.refuse(scope.row)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="flex justify-end"
        background
        layout="total, sizes, prev, pager, next"
        :total="pg.total"
        :current-page="pg.current"
        @size-change="pgActions.sizeChange"
        v-model:page-size="pg.size"
        @current-change="pgActions.currentChange"
        :page-sizes="[20, 30, 50]"
      />
      <el-dialog
        title="拒绝原因"
        v-model="modal.visible"
        @close="modalActions.close"
        :width="650"
        :ok-button-props="{ loading: loading }"
      >
        <div style="padding: 20px 25px">
          <el-input type="textarea" v-model="modal.reason" />
        </div>
        <template #footer>
          <el-button @click="modalActions.close">取消</el-button>
          <el-button type="primary" @click="modalActions.ok">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="less" scoped>
  html[data-theme='light'] {
    .searchBox {
      background-color: #fff;
    }

    .middle-content {
      background-color: #fff;
    }
  }

  html[data-theme='dark'] {
    .searchBox {
      background-color: #000;
    }

    .middle-content {
      background-color: #000;
    }
  }

  .user-approved {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    .middle-content {
      flex: 1;
      .tools {
        display: flex;
        justify-content: space-between;
        .selected {
          line-height: 32px;
          .blue {
            margin-left: 5px;
            color: #237ae4;
          }
        }
      }
    }

    :deep(.ant-table-thead > tr > th) {
      font-weight: bold;
    }

    :deep(.ant-table-selection-column) {
      padding: 0;
      width: 20px !important;
    }

    :deep(.ant-card-body) {
      padding: 10px 15px;
    }

    :deep(.ant-table-tbody > tr > td) {
      padding: 15px;
    }

    //调整head行属性
    :deep(.ant-table-thead > tr > th) {
      padding: 15px;
    }

    :deep(.ant-form-item) {
      margin-bottom: 10px !important;
    }

    .ant-modal-close-x {
      width: 55px;
      line-height: 45px;
      height: 45px;
    }
  }
</style>
